<template>
		<view class="list" :style="{background:background}">
			<picker  class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange"
			 @columnchange="pickerColumnchange" >
				<view class="pbox" :class="{'pbox_hover':regionStr != '请选择地址','marginLeft':pageType=='商家入驻','textColor':pageType=='收货地址'}">
					<view>{{regionStr}}</view>
					<text class="iconfont icon-you"></text>
				</view>
			</picker>
		</view>
</template>

<script>
	// import region from './pca-code.json';
	import region from './address.json';
	export default {
		data() {
			return {
				regionStr:'',
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],
			};
		},
		props: {
			pageType:{
				type:String,
				default:'区域代理'
			},
			background:{
				type:String,
				default:'#F7F7F7'
			},
			showPicker:{
				type:Boolean,
				default:false
			},
			// 组件高度
			height: {
				type: [Number],
				default: 92
			},
			// 组件宽度
			width: {
				type: [Number],
				default: 710
			},
			// 省id
			previnceId: {
				type: [Number],
				default: 110000
			},
			// 城市id
			cityId: {
				type: [Number],
				default: 110100
			},
			// 县区id
			countyId: {
				type: [Number],
				default: 110101
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Boolean],
				default: false
			},
			// 回显数据
			oldString:{
				type:String,
				default: ''
			},
		},
		watch:{
			isRevise(newVal,oldVal){
				if(newVal){
					this.regionStr=this.oldString
					console.log(newVal,oldVal,"%%%%",this.oldString,this.regionStr)
				}
				
			}
		},
		methods: {
			pickerChange(e) {
				
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +this.region[2][this.regionIndex[2]].name;
				// 组件传值
				let obj={
					province_id: this.region[0][this.regionIndex[0]].code,
					city_id: this.region[1][this.regionIndex[1]].code,
					area_id: this.region[2][this.regionIndex[2]].code,
					province_name: this.region[0][this.regionIndex[0]].name,
					city_name: this.region[1][this.regionIndex[1]].name,
					area_name: this.region[2][this.regionIndex[2]].name,
				}
				// console.log(obj,"obj")
				this.$emit('region', obj );
			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					if(this.oldRegion[e.detail.value].children){
						this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
							cityArr.push({
								name: item.name,
								code: item.code
							});
						})
						this.$set(this.region, 1, cityArr);
					}
				
					// 改变县区列表
					if(this.oldRegion[e.detail.value].children[0].children){
						this.oldRegion[e.detail.value].children[0].children.map(item => {
							countyArr.push({
								name: item.name,
								code: item.code
							});
						})
						this.$set(this.region, 2, countyArr);
					}
					
				
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			}
		},
		created() {
			let provinceArr = [];
			let cityArr = [];
			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log('二级数组',provinceArr)
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code) {
					this.regionIndex[2] = index;
				}
			})
			this.regionStr = '请选择地址';
			// if (this.isRevise) {
			// 	this.regionStr=this.oldString
			// 	console.log(this.regionStr,"(((())))")
			// 	// this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' + this.region[2][this.regionIndex[2]].name;
			// } else {
			// 	this.regionStr = '请选择地址';
			// }
		}
	}
</script>

<style lang="scss">
	.list {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background-color: #F7F7F7;
		padding: 4rpx 0;
		.picker {
			flex: 1;
			height: 92rpx;

			.pbox {
				overflow: hidden;
				width: 300rpx;
				height: 92rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				color: #808080;
				font-size: 30rpx;

				.icon-you {
					font-size: 28rpx;
				}
			
			}
			.textColor{
				color: #AAAAAA;
			}

			.pbox_hover {
				font-size: 30rpx;
				color: #000000;
			}

		}

		.name {
			min-width: 160rpx;
			font-size: 27rpx;
			color: #000000;
		}

		.icon-you {
			font-size: 28rpx;
			color: #999999;
		}

		.input {
			flex: 1;
			height: 100%;
			line-height: 92rpx;
			color: #9080A1;
		}

		.textarea {
			flex: 1;
			height: 100%;
			color: #A9A9A9;
		}
	}
	.marginLeft{
		padding-left: 60rpx;
		color: #C8C8C8;
	}

</style>
